<!-- 设置班级分层弹框 -->
<template>
  <el-drawer v-model="visible" class="layer-drawer">
    <div class="title">班级分层规则</div>
    <div class="flex-between" style="align-items: unset">
      <el-form-item label="班级:">
        <class-selector
          v-model:currentClass="currentClass"
          :isClassDefault="true"
        />
      </el-form-item>
      <div class="init-layer-btn hover" @click="onShowLayerSet(!isLayer)">
        初始化分层
      </div>
    </div>
    <div class="setting-box" v-show="isLayer">
      <div class="title">请配置初始化设置</div>
      <el-form-item label="分层方式:">
        <el-radio-group v-model="form.layerType">
          <el-radio value="1">按正确率分层</el-radio>
          <el-radio value="2">按学生排名分层</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="数据来源:">
        <el-checkbox-group v-model="form.sourceType">
          <el-checkbox value="2">考试</el-checkbox>
          <el-checkbox value="1">作业</el-checkbox>
          <el-checkbox value="3">平板</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="时间范围:" style="width: 2rem">
        <el-date-picker
          v-model="form.rangeTime"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <div class="flex-around btn-list">
        <el-button size="small" @click="onShowLayerSet(false)">取消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="getLayeredStudentListInfo"
          >初始化</el-button
        >
      </div>
    </div>
    <div class="student-box">
      <div class="flex-between">
        <div class="title">待分层学生</div>
        <div class="tip-text">拖动学生以加入分层区域</div>
      </div>
      <VueDraggable
        v-model="waitStudentList"
        animation="150"
        ghostClass="ghost"
        class="student-list flex"
        group="student"
      >
        <span
          v-for="item in waitStudentList"
          :key="item.student_id"
          :class="item.student_name"
          class="student-item hover"
        >
          {{ item.student_name }}
        </span>
      </VueDraggable>

      <div
        class="layer-box"
        v-for="(_, index) in layerStudentList"
        :key="index"
      >
        <div class="title flex">
          <img class="edit-img" src="@/assets/images/assignment/edit.png" />
          {{ String.fromCharCode(index + 65) }}层学生
        </div>
        <VueDraggable
          v-model="layerStudentList[index]"
          animation="150"
          ghostClass="ghost"
          class="student-list flex"
          group="student"
        >
          <span
            v-for="item in layerStudentList[index]"
            :key="item.student_id"
            :class="item.student_name"
            class="student-item hover"
          >
            {{ item.student_name }}
          </span>
        </VueDraggable>
      </div>
    </div>
    <footer class="flex-between layer-footer">
      <el-button class="-btn flex-center hover" @click="onCancel"
        >取消</el-button
      >
      <div class="confirm-btn flex-center hover" @click="onConfirm">确定</div>
    </footer>
  </el-drawer>
</template>

<script setup>
import { defineModel, ref, watch } from 'vue'
import {
  getLayeredStudentList,
  postLayeredStudentList
} from '@/apis/assignment/index'
import { useAuthStore } from '@/stores'
import { storeToRefs } from 'pinia'
import dayjs from 'dayjs'

import ClassSelector from '@/views/assignment/components/ClassSelector.vue'
import { VueDraggable } from 'vue-draggable-plus'
import { ElMessage } from 'element-plus'

const { userInfo, nowGlobalSubjectId } = storeToRefs(useAuthStore())
const visible = defineModel('visible')
const currentClass = ref([])
const form = ref({
  layerType: '3',
  sourceType: ['2'],
  rangeTime: []
})

const isLayer = ref(false)
const onShowLayerSet = bool => {
  isLayer.value = bool
  form.value = {
    layerType: '3',
    sourceType: ['2'],
    rangeTime: [dayjs().subtract(3, 'month').valueOf(), dayjs().valueOf()]
  }
  if (isLayer.value) {
    form.value.layerType = '1'
  }
}

const waitStudentList = ref([])
const layerStudentList = ref([[], [], []])

/**
 * 获取分层信息
 */
const getLayeredStudentListInfo = async () => {
  const res = await getLayeredStudentList({
    class_id: currentClass.value[1],
    teacher_id: userInfo.value.userId,
    school_id: userInfo.value.school_id,
    start_time: dayjs(form.value.rangeTime[0]).unix(),
    end_time: dayjs(form.value.rangeTime[1]).unix(),
    task_from: form.value.sourceType.toString(),
    layer_type: form.value.layerType,
    subject_id: String(nowGlobalSubjectId.value)
  })
  const { students, a_students, b_students, c_students } = res.data
  waitStudentList.value = students || []
  layerStudentList.value = [
    a_students || [],
    b_students || [],
    c_students || []
  ]
}

const onCancel = () => {
  visible.value = false
}

/**
 * 设置分层
 */
const onConfirm = async () => {
  const res = await postLayeredStudentList({
    class_id: currentClass.value[1],
    teacher_id: userInfo.value.userId,
    school_id: userInfo.value.school_id,
    subject_id: String(nowGlobalSubjectId.value),
    alayer_student_ids: layerStudentList.value[0]
      .map(student => student.student_id)
      .toString(),
    blayer_student_ids: layerStudentList.value[1]
      .map(student => student.student_id)
      .toString(),
    clayer_student_ids: layerStudentList.value[2]
      .map(student => student.student_id)
      .toString()
  })
  console.log('设置分层', res)
  if (res.code === 1) {
    ElMessage.success('分层设置成功!')
    onCancel()
  }
}
watch(
  () => currentClass.value,
  () => {
    getLayeredStudentListInfo()
  },
  {
    deep: true
  }
)
</script>

<style lang="less" scoped>
.layer-drawer {
  .title {
    margin: 16px 0 10px;
    font-weight: bold;
  }

  .tip-text {
    color: #b7b8bb;
  }
  .init-layer-btn {
    font-weight: bold;
    color: @color-brand-checked;
  }

  .setting-box {
    :deep(.el-radio__label) {
      font-size: @size-base;
    }
    :deep(.el-range-input) {
      font-size: @size-base;
    }
  }
  .layer-box {
    border: 1px dotted #bfc6f3;
    margin-top: 20px;
    padding: 14px;
    padding-top: 0;

    background-size: 8px 1px;
    background-repeat: repeat-x;
    .student-list {
      padding: 0;
    }
    .edit-img {
      width: 16px;
      margin-right: 10px;
    }
  }
  .student-list {
    flex-wrap: wrap;
    gap: 14px 20px;
    min-height: 10px;
    max-height: 400px;
    overflow-y: auto;
    align-items: flex-start;
    margin: 0 auto;
    align-content: flex-start;
    padding: 0 14px;
    .student-item {
      line-height: 2;
      background-color: #f2f4f9;
      border-radius: 4px;
      padding: 0 8px;
    }
  }
  .btn-list {
    margin-top: 20px;
  }
  .layer-footer {
    margin-top: 20px;
  }
}
:deep(.el-input__inner) {
  font-size: @size-base;
}
</style>

<!-- eslint-disable -->
<style lang="less">
.layer-drawer {
  width: 620px !important;
  .el-drawer__header {
    margin-bottom: unset !important;
  }
  .el-drawer__body {
    padding-top: 0px;
  }
  :deep(.el-form-item) {
    margin-bottom: 10px;
  }
  :deep(.el-form-item__label) {
    font-size: @size-base;
  }
  :deep(.el-form-item__label, ) {
    font-size: @size-base;
  }
}
</style>
